<template>
  <van-row>
    <van-nav-bar
      title="排产详情"
      left-text="返回"
      left-arrow
      @click-left="$emit('close')"
    >
      <template #right>
        <van-popover
          v-model="showPopover"
          placement="bottom-end"
          trigger="click"
          :actions="actions"
          @select="handleAction"
        >
          <template #reference>
            <van-icon name="ellipsis" size="20" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab title="排产信息">
        <van-cell title="编号" :value="produceInfo.produceNo" />
        <van-cell value-class="cell_value" title="排产日期" :value="produceInfo.produceDate" />
        <van-cell title="结束日期" :value="produceInfo.produceEndDate?produceInfo.produceEndDate:'未结束'" />
        <van-cell title="产品" :value="produceInfo.productName" />
        <van-cell title="客户" :value="produceInfo.customerName" />
        <van-cell title="总数" :value="produceInfo.quantity">
          <template #default>
            {{ produceInfo.quantity }}{{ productInfo.unit }}
          </template>
        </van-cell>
        <van-cell title="余数" :value="produceInfo.remainingQuantity">
          <template #default>
            <span style="color: #ee0a24">
              {{ produceInfo.remainingQuantity }}{{ productInfo.unit }}
            </span>
          </template>
        </van-cell>
        <van-cell title="生产状态" :value="produceInfo.produceState">
          <template #default>
            <produce-state-tag v-model="produceInfo.produceState" />
          </template>
        </van-cell>
        <van-cell title="优先级" :value="produceInfo.priority">
          <template #default>
            <van-tag v-if="produceInfo.priority==='0'" type="success">普通</van-tag>
            <van-tag v-if="produceInfo.priority==='1'" type="danger">加急</van-tag>
          </template>
        </van-cell>
        <van-cell title="来源" :value="produceInfo.sourceType">
          <template #default>
            <source-type-tag v-model="produceInfo.sourceType" />
          </template>
        </van-cell>
        <van-cell value-class="cell_value" title="生产进度">
          <template #default>
            <custom-progress v-model="produceInfo.percentage" />
          </template>
        </van-cell>
        <van-cell title="备注" :label="produceInfo.remark" />
      </van-tab>
      <van-tab title="产品信息">
        <van-cell title="名称" :value="productInfo.moldName" />
        <van-cell title="颜色" :value="productInfo.color" />
        <van-cell title="材质" :value="productInfo.material" />
        <van-cell title="尺码" :value="productInfo.size" />
        <van-cell title="长度" :value="productInfo.length" />
      </van-tab>
      <van-tab title="排产日志">
        <van-cell-group>
          <van-cell v-for="(item,index) in bizLogList" :key="index">
            <template #default>
              <div class="title">
                {{ item.username }}
              </div>
              <div class="right">
                {{ item.createTime }}
              </div>
              <div class="desc">
                {{ item.operationType }} {{ item.details }}
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
    <van-popup v-model="showSubmit" position="right" :style="{ width: '100%', height: '100%' }">
      <produce-submit-module ref="submitModule" @close="handleClose" />
    </van-popup>
  </van-row>
</template>

<script>
import { selectProduceById, pauseProduce, recoveryProduce, deleteProduce } from '@/api/produce'
import SourceTypeTag from '@/components/tag/SourceTypeTag.vue'
import ProduceStateTag from '@/components/tag/ProduceStateTag.vue'
import { Dialog } from 'vant'
import ProduceSubmitModule from '@/views/produce/produceSubmit.vue'
import CustomProgress from '@/components/CustomProgress.vue'
import { selectBizLogByBizId } from '@/api/bizLog'

export default {
  name: 'ProduceDetail',
  components: { CustomProgress, ProduceSubmitModule, ProduceStateTag, SourceTypeTag },
  data() {
    return {
      active: 0,
      showSubmit: false,
      produceInfo: {},
      productInfo: {},
      showOutputDatePicker: false,
      dialogVisible: false,
      shiftList: [],
      showPopover: false,
      bizLogList: [],
      actions: [
        { icon: 'edit', text: '修改信息', action: 'edit', disabled: false },
        { icon: 'pause-circle-o', text: '暂停生产', action: 'suspend', disabled: false },
        { icon: 'play-circle-o', text: '恢复生产', action: 'recovery', disabled: false },
        { icon: 'delete-o', text: '删除', action: 'delete', disabled: false }
      ]
    }
  },
  methods: {
    init(id) {
      selectProduceById(id).then(resp => {
        if (resp.success) {
          this.produceInfo = resp.data
          this.productInfo = resp.data.productInfo
          this.setDisabled(resp.data.produceState)
        }
      })
      this.setBizLog(id)
    },
    setBizLog(bizId) {
      const query = { bizId: bizId, tableName: 'erp_produce' }
      selectBizLogByBizId(query).then(resp => {
        if (resp.success) {
          this.bizLogList = resp.data
        }
      })
    },
    handleAction(row) {
      if (row.action === 'edit') {
        this.doEdit()
      } else if (row.action === 'suspend') {
        this.doSuspend()
      } else if (row.action === 'delete') {
        this.doDelete()
      } else {
        this.doRecovery()
      }
    },
    doEdit() {
      this.showSubmit = true
      this.$nextTick(() => {
        this.$refs.submitModule.init(this.produceInfo.id)
      })
    },
    doSuspend() {
      Dialog.confirm({
        title: '暂停生产确认',
        message: '是否暂停此生产'
      }).then(() => {
        pauseProduce({ ids: [this.produceInfo.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('操作成功')
            this.init(this.produceInfo.id)
          }
        })
      }).catch(() => {})
    },
    doRecovery() {
      Dialog.confirm({
        title: '恢复生产确认',
        message: '是否恢复此生产'
      }).then(() => {
        recoveryProduce({ ids: [this.produceInfo.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('操作成功')
            this.init(this.produceInfo.id)
          }
        })
      })
    },
    doDelete() {
      Dialog.confirm({
        title: '删除确认',
        message: '是否删除此排产'
      }).then(() => {
        deleteProduce({ ids: [this.produceInfo.id] }).then(resp => {
          if (resp.success) {
            this.$toast.success('删除成功')
            this.$emit('close')
          }
        })
      })
    },
    setDisabled(state) {
      for (let i = 0; i < this.actions.length; i++) {
        var action = this.actions[i]
        if (action.action === 'edit') {
          action.disabled = state === '2'
        } else if (action.action === 'suspend') {
          action.disabled = state !== '0'
        } else if (action.action === 'recovery') {
          action.disabled = state !== '1'
        } else if (action.action === 'delete') {
          action.disabled = state === '2'
        }
      }
    },
    handleClose() {
      this.showSubmit = false
      this.init(this.produceInfo.id)
    }
  }
}
</script>
<style scoped>

</style>
